<template>
<!-- 员工绩效比拼 -->
  <div class="container-box">
    <el-table
      :header-cell-style="tableHeaderColor"
      :data="tableData"
      size="mini"
      border
      style="width: 100%"
    >
      <el-table-column prop="amount_customer_num" label="顾客总数" width="120"></el-table-column>
      <el-table-column prop="amount_order_num" label="订单总数" width="120"></el-table-column>
      <el-table-column prop="amount_order_amount_money" label="订单总金额" width="120"></el-table-column>
      <el-table-column prop="amount_order_pay_money" label="订单付款总金额" width="120"></el-table-column>
      <el-table-column prop="amount_order_pay_num" label="订单付款总数" width="120"></el-table-column>
      <el-table-column prop="amount_customer_pay_num" label="顾客付款总数" width="120"></el-table-column>
      <el-table-column prop="amount_order_cancel_num" label="顾客取消订单数" width="120"></el-table-column>
      <el-table-column prop="amount_good_counts" label="订单商品总数" width="120"></el-table-column>
      <el-table-column prop="amount_average_customer_money" label="顾客平均付款数" width="120"></el-table-column>
      <el-table-column prop="staff_name" label="员工名" width="256"></el-table-column>
    </el-table>
    <pagination
      @sendPageSize="receivePageSize"
      @sendCurrentPage="receiveCurrentPage"
      :totalPage="totalPage"
    ></pagination>
  </div>
</template>
<script>
import pagination from "common/pagination";
export default {
  data() {
    return {
      totalPage: 300,
      tableData: [
        {
          amount_customer_num: "5",
          amount_order_num: "5",
          amount_order_amount_money: "75",
          amount_order_pay_money: "75",
          amount_order_pay_num: "5",
          amount_customer_pay_num: "5",
          amount_order_cancel_num: "0",
          amount_good_counts: "5",
          amount_average_customer_money:"15",
          staff_name:"小黑"
        },
        {
          amount_customer_num: "5",
          amount_order_num: "5",
          amount_order_amount_money: "75",
          amount_order_pay_money: "75",
          amount_order_pay_num: "5",
          amount_customer_pay_num: "5",
          amount_order_cancel_num: "0",
          amount_good_counts: "5",
          amount_average_customer_money:"15",
          staff_name:"小白"
        },
        {
          amount_customer_num: "5",
          amount_order_num: "5",
          amount_order_amount_money: "75",
          amount_order_pay_money: "75",
          amount_order_pay_num: "5",
          amount_customer_pay_num: "5",
          amount_order_cancel_num: "0",
          amount_good_counts: "5",
          amount_average_customer_money:"15",
          staff_name:"小蓝"
        },
        {
          amount_customer_num: "5",
          amount_order_num: "5",
          amount_order_amount_money: "75",
          amount_order_pay_money: "75",
          amount_order_pay_num: "5",
          amount_customer_pay_num: "5",
          amount_order_cancel_num: "0",
          amount_good_counts: "5",
          amount_average_customer_money:"15",
          staff_name:"小红"
        },
      ],
      // options: [
      //   {
      //     value: "选项1",
      //     label: "黄金糕"
      //   },
      //   {
      //     value: "选项2",
      //     label: "双皮奶"
      //   },
      //   {
      //     value: "选项3",
      //     label: "蚵仔煎"
      //   },
      //   {
      //     value: "选项4",
      //     label: "龙须面"
      //   },
      //   {
      //     value: "选项5",
      //     label: "北京烤鸭"
      //   }
      // ],
      value: "",
      input2: "",
      DateValue: ""
    };
  },
  methods: {
    receivePageSize(val) {
      console.log(val);
    },
    receiveCurrentPage(val) {
      console.log(val);
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #F7F6Fd;color: #B6B5C2;font-weight: 500;";
      }
    }
  },
  watch: {
    DateValue(newval, oldval) {
      console.log(newval);
      console.log(oldval);
    }
  },
  components: {
    pagination
  }
};
</script>

<style scoped lang="scss">
@import "../../assets/css/them.scss";
.container-box {
  .form-box {
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
    .input-box {
      margin-bottom: 20px;
    }
    .input-label div {
      padding: 0px !important;
    }
    .input-label .label {
      margin-top: 4px;
    }
  }
  .button-box {
    margin: 50px;
  }
}
</style>